+<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			.mui-bar-nav~.mui-content {
			    padding-top: 24px;
			}
			#recharge_num_box ul {
				margin: 20px 0;
			}
			
			#money_btn_item {
				text-align: center;
				margin-bottom: 10px;
			}
			
			#money_btn_item a {
				padding: 10px 0;
				margin: 5px 0;
				width: 30%;
			}
			
			.mui-popover {
				background-color: #FFFFFF;
				padding: 10px 0;
			}
			
			.mui-popover .mui-table-view-radio .mui-table-view-cell .mui-media-object {
				margin-right: 25px;
				max-width: inherit;
			}
			
			.mui-popover .mui-table-view-radio .mui-table-view-cell:first-child .mui-media-object {
				max-width: 45px;
				height: 35px;
				margin-top: 4px;
			}
			
			.mui-popover .mui-table-view-radio .mui-media-body {
				line-height: 45px;
				font-size: 16px;
				text-align: left;
			}
			
			.mui-popover .mui-table-view-radio .mui-table-view-cell {
				padding: 8px 15px;
				color: #333333;
			}
			
			form.mui-input-group {
				margin: 5px 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">充值</h1>
		</header>
		<div class="mui-content">
			<h5 class="min-title">当前账号</h5>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-text-center" id="me"></li>
			</ul>
			<div id="recharge_num_box">
				<h5 class="min-title">充值金额 ( 元 )</h5>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<input type="number" value="0.01" id="total" class="mui-input-clear mui-input  mui-text-center">
					</div>
				</form>
				<div id="money_btn_item">
					<a class="mui-btn">￥100</a>
					<a class="mui-btn">￥200</a>
					<a class="mui-btn">￥300</a>
					<a class="mui-btn">￥500</a>
					<a class="mui-btn">￥800</a>
					<a class="mui-btn">￥1000</a>
				</div>
				<h5 class="min-title">充值方式</h5>
				<a href="#pay-action" class="mui-btn btn-block btn-outlined">请选择</a>
			</div>
			<div class="mui-popover mui-popover-action" id="pay-action">
				<ul class="mui-table-view mui-table-view-radio oauth-area">
					<!--探测本机软件，自动显示支付宝和微信支付方式-->
					<!--银联在线一直显示-->
					<li id="UN_WEB" class="mui-table-view-cell mui-media pay">
						<a href="javascript:;" class="mui-navigate-right">
							<img class="mui-media-object mui-pull-left" src="../images/icon/yinlian.png">
							<div class="mui-media-body">
								银联在线
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/beecloud.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			document.getElementById("me").innerText = User.getMyUserName();
			var rechargeVal = document.getElementById("total");
			//选择金钱数
			mui('#money_btn_item').on('tap', '.mui-btn', function() {
				$(this).addClass('btn-outlined').siblings().removeClass('btn-outlined');
				rechargeVal.value = $(this).text().substr(1);
			})
			
			// 金额验证
			mui('#recharge_num_box').on('tap', 'a', function() {
				rechargeVal.blur();
				if(!/^(([1-9]\d{0,5})|0)(\.\d{1,2})?$/.test(rechargeVal.value) || rechargeVal.value == 0) {
					mui.toast('您填写的金额不正确，请重新填写');
					rechargeVal.value = '';
					return false;
				}
			})
	
			mui('.mui-table-view-radio').on('tap', '.pay', function() {
				mui('#pay-action').popover('hide');
				var channel_id = null;
				switch(this.id) {
					case 'alipay':
						channel_id = 'ALI_APP';
						break;
					case 'wxpay':
						channel_id = 'WX_APP';
						break;
					case 'UN_WEB':
						channel_id = 'UN_WEB';
						break;
					default:
						break;
				}
				beecloudPay(channel_id);
			})
	
			// 显示支付状态页
			function beecloudPay(bcChannel) {
				//向服务器发起请求获取订单信息
				var amount = Number(rechargeVal.value);
				var orderurl = baseURL + 'account/inAccount/' + (amount * 100) + '/' + bcChannel + '.json';
				console.log(orderurl);
				//GET上传数据
				Common.ajax({
					url : orderurl
				}, function(data) {
					console.log(JSON.stringify(data));
					console.log("----- 请求订单成功 -----");
					if(data.code == '-1') {
						mui.toast('登录失效，请重新登录');
					} else if(data.code == '-2') {
						mui.toast('尚未在平台开立账户');
					} else {
						var data = data.beecloud;
						/*
						 * 构建支付参数
						 * 
						 * *app_id: BeeCloud控制台上创建的APP的appid，必填 
						 * *title: 订单标题，32个字节，最长支持16个汉字；必填
						 * total_fee: 支付金额，以分为单位，大于0的整数，必填
						 * *bill_no: 订单号，8~32位数字和/或字母组合,确保在商户系统中唯一，必填
						 * optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填
						 * bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填 
						 */
						var payData = {
							app_id: data.app_id,
							channel: bcChannel,
							title: data.title,
							total_fee: amount * 100,
							bill_no: data.bill_no,
							optional: {
								'uerId': 'YanDeHao',
								'phone': '8888888'
							},
							bill_timeout: 360,
							return_url: "pages/pay-status.html" //wap支付成功后的回跳地址
						};
						/*
						 *  发起支付
						 *  payData: 支付参数
						 *  cbsuccess: 支付成功回调
						 *  cberror: 支付失败回调
						 */
						beecloud.payReq(payData, function(result) {
							var Reg = /.+out_trade_no=\"([0-9a-zA-Z]+).+&total_fee=\"(.+)\"&success=.+/g;
							var payTotal, payNo;
							if(Reg.exec(JSON.parse(result.rawdata).result)) {
								payNo = RegExp.$1;
								console.error('支付宝签名 >订单编号：' + payNo);
								console.error('平台           >订单编号：' + data.bill_no);
								payTotal = RegExp.$2;
								console.error('支付宝签名 >支付金额：' + payTotal);
								console.error('平台           >支付金额：' + data.total_fee);
							} else {
								console.log('匹配失败');
							}
							// 充值成功后显示成功页
							var successPage = plus.webview.create('pay-status.html', 'pay-status', {}, {
								payinfo : {
									paytitle : '充值请求已受理',
									paytype : '充值',
									paycode : 1,
									payno : payNo,
									paycount : payTotal,
									paytime : new Date().toLocaleString()
								}
							})
							successPage.show('slide-in-bottom', 200);
							successPage.onclose = function() {
								mui.back();
								var openerPage = plus.webview.currentWebview().opener();
								mui.fire(openerPage, 'reload');
							}
							console.log('成功');
							console.log(JSON.stringify(result));
							console.log(result.rawdata);
							console.log(JSON.parse(result.rawdata).result);
						}, function(e) {
							console.log('失败');
							mui.toast(e.message);
							console.log(e.code);
							console.log(e.message);
						});
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			}
		})
		
	</script>

</html>